<template>
  <div class="home">
    <div :class="bg" class="top">
    <h1>记事本</h1>
    <div class="top-icon">
        <i class="el-icon-s-fold" style="font-size:30px"  @click="show=true"></i>
    </div>
    </div>  

      <van-search
      v-model="value"
      show-action
      placeholder="请输入任务"
      @blur="add"
    >
      <template #action>
          <van-button type="info" size="small" @click="add">提交</van-button>
      </template>
    </van-search>
  
      <child :list="list"></child>

    <van-popup v-model="show" position="left" :style="{width:'50%',height:'80%'}" class="popup-container">
      <ul>
        <li style="margin-top:10px">
          <van-button type="info">切换主题</van-button>
        </li>
        <li  style="margin-top:10px"><van-button type="info" @click="goEdit">编辑数据</van-button></li>
        <li style="margin-top:10px"><button @click="bg='pink'">粉色</button></li>
        <li style="margin-top:10px"><button @click="bg='blue'">蓝色</button></li>
        <li style="margin-top:10px"><button @click="bg='green'">绿色</button></li>
      </ul>
    </van-popup>

    

  </div>
</template>

<script>
  import child from "../components/child";
  export default{
    data(){
      return{
        value:"",
        show:false,
        bg:"blue",
      }
    },

    methods: {
      //添加数据
      add(){
        var obj={
          title:this.value,
          state:0,
          time:new Date(),
        };
      this.$store.commit("add",obj);  
      this.$message("添加成功")
      },
      //到编辑页面
      goEdit(){
        this.$router.push("/edit");
      }
    },
   components:{
      child,
    }
  }
</script>

<style scoped>
*{
    margin:0;
    padding:0;
}
.top-icon{
    width:20%;
    height:100%;
    /* background-color: brown; */
    position: absolute;
    right:0px;
    display: inline-flex;
    justify-content:center;
    align-items: center;
}
.top{
    position: relative;
    width:100%;
    height:64px;
    color:white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.top.blue {
  background-color: rgb(53, 159, 247) !important;
}
.top.pink {
  background-color: pink !important;
}
.top.green {
  background-color: lightgreen !important;
}
.popup-container{
  /* background-color:rgba(0,0,0,0.3); */
  display: inline-flex;
  flex-wrap: wrap;
}
</style>
